<!-- 参考官方文档 -->
<template>
    <view class="">
        <!-- src：资源地址 -->
        <!-- mode：图片裁剪与缩放模式 -->
        <!-- aspectFill：保持纵横比缩放图片，只保证图片的短边能完全显示出来 -->
        <!-- widthFix：宽度不变，高度自动变化，保持原图宽高比不变 -->
        <!-- heightFix：高度不变，宽度自动变化，保持原图宽高比不变 -->
        <!-- lazy-load：图片懒加载 -->
        <image class="image-1" src="../../../common/image/logo.png" lazy-load></image>
        <image class="image-2" src="../../../common/image/图片2.webp" mode="aspectFill"></image>
        <image class="image-3" src="../../../common/image/图片3.jpg" mode="widthFix"></image>
        <image class="image-3" src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni-app.png" mode="widthFix">
        </image>
    </view>
</template>

<script lang="ts" setup>

</script>

<style lang="scss" scoped>
    .image-1 {
        width: 150px;
        height: 150px;
        margin: 10px;
    }

    .image-2 {
        width: 150px;
        height: 150px;
        margin: 10px;
    }

    .image-3 {
        width: 150px;
        margin: 10px;
    }
</style>